//班级付款申请
<template>
  <div class="box">
    <!-- 查询form表单 -->
    <el-form ref="form" :model="form" label-width="110px" class="clearFix">
      <el-form-item label="标题">
        <el-input v-model="form.title" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="拟付款日期">
        <el-col :span="11">
          <el-date-picker
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
            v-model="form.expectedDateOfPayment"
            style="width: 100%"
          ></el-date-picker>
        </el-col>
      </el-form-item>
      <el-form-item label="项目名称">
        <el-input
          v-model="form.relatedProjects"
          placeholder="请输入"
        ></el-input>
      </el-form-item>
      <el-form-item label="关联合同">
        <el-input
          v-model="form.constructionTeamContract"
          placeholder="请输入"
        ></el-input>
      </el-form-item>
      <el-form-item label="是否紧急">
        <el-select v-model="form.emergency" placeholder="请选择">
          <el-option label="否" value="否"></el-option>
          <el-option label="是" value="是"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="申请人">
        <el-input v-model="form.proposerName" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="提交时间">
        <el-col :span="11">
          <el-date-picker
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
            v-model="form.addTime"
            style="width: 100%"
          ></el-date-picker>
        </el-col>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="form.state" placeholder="请选择">
          <el-option label="草稿" value="草稿"></el-option>
          <el-option label="待审核" value="待审核"></el-option>
          <el-option label="审核通过" value="审核通过"></el-option>
          <el-option label="审核拒绝" value="审核拒绝"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <el-row>
      <el-button type="primary" size="small" @click="query">查询</el-button>
      <el-button size="small" @click="reset">重置</el-button>
    </el-row>
    <el-row class="addBtn">
      <el-button type="primary" size="small" @click="addClass"
        >新增班级付款申请</el-button
      >
    </el-row>

    <!-- 表格 -->
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column
        align="center"
        label="序号"
        width="50"
        type="index"
        :index="indexMethod"
      >
      </el-table-column>
      <el-table-column align="center" prop="title" label="标题" width="250">
      </el-table-column>
      <el-table-column
        align="center"
        prop="expectedDateOfPayment"
        label="拟付款日期"
        width="150"
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="paymentAmount"
        label="待附金额(元)"
        width="100"
      >
      </el-table-column>
      <el-table-column align="center" prop="name" label="所属项目" width="120">
      </el-table-column>
      <el-table-column
        align="center"
        prop="contractName"
        label="关联合同"
        width="200"
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="emergency"
        label="是否紧急"
        width="100"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.emergency == 0">否</span>
          <span v-if="scope.row.emergency == 1">是</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="proposerName"
        label="申请人"
        width="100"
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="addTime"
        label="提交时间"
        width="150"
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="auditStatus"
        label="状态"
        width="100"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.auditStatus == 0">草稿</span>
          <span v-if="scope.row.auditStatus == 1">待审核</span>
          <span v-if="scope.row.auditStatus == 2">审核中</span>
          <span v-if="scope.row.auditStatus == 3">已审核</span>
          <span v-if="scope.row.auditStatus == 4">审核通过</span>
          <span v-if="scope.row.auditStatus == 5">审核拒绝</span>
        </template>
      </el-table-column>
      <el-table-column align="center" fixed="right" label="操作" width="200">
        <template slot-scope="scope">
          <div v-if="scope.row.auditStatus == 0">
            <el-button @click="edit(scope.row)" type="text" size="small"
              >编辑</el-button
            >
            <el-button type="text" size="small" @click="toExamine(scope.row)"
              >提交审核</el-button
            >
            <el-button type="text" size="small" @click="deleteData(scope.row)"
              >删除</el-button
            >
            <el-button type="text" size="small" @click="details(scope.row)"
              >详情</el-button
            >
          </div>
          <div v-if="scope.row.auditStatus == 1">
            <el-button type="text" size="small" @click="details(scope.row)"
              >详情</el-button
            >
            <el-button type="text" size="small" @click="deleteData(scope.row)"
              >删除</el-button
            >
          </div>
          <div
            v-if="
              scope.row.auditStatus == 3 ||
              scope.row.auditStatus == 4 ||
              scope.row.auditStatus == 2
            "
          >
            <el-button type="text" size="small" @click="details(scope.row)"
              >详情</el-button
            >
            <!-- <el-button type="text" size="small" @click="deleteData(scope.row)"
              >删除</el-button
            > -->
          </div>
          <div v-if="scope.row.auditStatus == 5">
            <el-button @click="edit(scope.row)" type="text" size="small"
              >编辑</el-button
            >
            <el-button type="text" size="small" @click="deleteData(scope.row)"
              >删除</el-button
            >
            <el-button type="text" size="small" @click="details(scope.row)"
              >详情</el-button
            >
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      align="right"
      layout="prev, pager, next"
      @current-change="changePage"
      :current-page="nowPage"
      :page-count="maxPage"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "ClassPage",
  components: {},
  data() {
    return {
      tableData: [],
      nowPage: 1, //单前页码
      maxPage: 1,
      form: {
        title: "",
        relatedProjects: "", //项目名称
        expectedDateOfPayment: "", //付款日期
        constructionTeamContract: "", //合同
        emergency: "", //紧急
        proposerName: "", //申请人
        addTime: "", //提交时间
        auditStatus: "", //状态
      },
    };
  },
  computed: {},
  methods: {
    //成功
    open2(str) {
      this.$message({
        message: str,
        type: "success",
      });
    },
    //警告
    open3(str) {
      this.$message({
        message: str,
        type: "warning",
      });
    },
    indexMethod(index) {
      return index + 1;
    },
    getData(num) {
      let account = Number(
        JSON.parse(sessionStorage.getItem("employee")).account
      );
      this.$batchApi
        .classMoneyGetData({ account: account, index: num })
        .then((data) => {
          // console.log(data.data);
          this.maxPage = Math.ceil(data.data.total / 10);
          this.tableData = data.data.data;
        });
    },
    //分页
    changePage(num) {
      this.nowPage = num;
      this.getData(num);
    },
    //查询
    query() {
      let obj = {
        account: Number(JSON.parse(sessionStorage.getItem("employee")).account),
        index: 1,
        title: this.form.title,
        relatedProjects: this.form.relatedProjects, //项目名称
        expectedDateOfPayment: this.form.expectedDateOfPayment, //付款日期
        constructionTeamContract: this.form.constructionTeamContract, //合同
        emergency: this.form.emergency, //紧急
        proposerName: this.form.proposerName, //申请人
        addTime: this.form.addTime, //提交时间
        auditStatus: Number(this.form.auditStatus), //状态
      };
      console.log(obj);
      this.$batchApi.classMoneyQuery(obj).then((data) => {
        console.log(data.data);
        this.tableData = data.data.data;
      });
    },
    //重置---清空
    reset() {
      this.getData(1);
      this.form = {
        title: "",
        entryName: "", //项目名称
        paymentDate: "", //付款日期
        contract: "", //合同
        urgent: "", //紧急
        applicant: "", //申请人
        submissionTime: "", //提交时间
        state: "", //状态
      };
    },
    //新增
    addClass() {
      sessionStorage.setItem("flowNum", "SGBZ2022050817071877062");
      this.$router.push("/batch/startBatch/AddClass");
    },
    //详情
    details(value) {
      sessionStorage.setItem("flowNum", value.flowNum);
      this.$router.push("/batch/startBatch/CurrentDetails");
    },
    //编辑
    edit(value) {
      sessionStorage.setItem("flowNum", value.flowNum);
      this.$router.push("/batch/startBatch/editClass");
    },
    //删除
    deleteData(value) {
      let page = this.nowPage;
      this.$confirm("是否确认删除该班组付款申请", "删除提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        var params = new URLSearchParams();
        params.append("flowNum", value.flowNum);

        this.$batchApi
          .classMoneyTableDelete(params)
          .then((data) => {
            console.log(data.data);
            if (data.data.code == 200) {
              this.getData(page);
              this.open2("删除成功");
            } else {
              this.open3("删除失败");
            }
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      });
    },
    // 审核
    toExamine(value) {
      console.log(this.nowPage);
      this.$confirm("是否继续提交班组付款申请", "审核提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          var params = new URLSearchParams();
          params.append("flowNum", value.flowNum);

          this.$batchApi.classMoneyTabletoExamine(params).then((data) => {
            console.log(data.data);
            if (data.data.code == 200) {
              this.getData(1);
              this.open2("提交审核");
            } else {
              this.open3("提交失败");
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消提交审核",
          });
        });
    },
  },
  created() {
    this.getData(1);
  },
};
</script>
<style scoped lang='less'>
.el-form {
  .el-form-item {
    width: 300px;
    float: left;
    .el-col {
      width: 100%;
    }
  }
}
.el-row {
  text-align: left;
}
//表格
.el-table {
  font-size: 12px;
}
/deep/.el-table .el-table__cell {
  padding: 0 !important;
}
.addBtn {
  margin: 60px 0 20px 0;
}
// 提交审核弹窗
.el-dialog {
  p:nth-child(2) {
    color: #ccc;
    font-size: 12px;
    margin-top: 10px;
  }
}
</style>